html{font-size: 625%}
body{font-size: 0.16rem}
body html{height: 100%;width: 100%;position: relative;}
h1,h2,h3,h4,h5,p,li,ul,body,html{padding:0;margin: 0;}
li{list-style: none;}
a{text-decoration: none;}
img{display: block;}

body{padding-top: 0.5rem;background-color: #ebebeb}
header{width: 100%;height: 50px;line-height: 50px;display: flex; justify-content:space-between;background-color: #282828;font-size: 0.14rem;position: fixed;top: 0;z-index: 88}
.toolbar{display: flex; color: #8f8f8f}
.toolbar .toolbar-list{width: 0.48rem;text-align: center;}
.toolbar .title{color: #fff;}
.nav-right{display: flex}
.nav-right a{color:#8f8f8f;display: block;}
.nav-right a .icon-jiantou{font-size: 0.12rem}
.nav-right a.city{padding: 0 0.06rem;}
.nav-right a.mine{width: 0.48rem;text-align: center;}

.banner{width: 100%}
.banner .wrap-banner{width: 100%}
.banner .wrap-banner .swiper-container{width: 100%}
.banner .wrap-banner .swiper-container .banner-img{width: 100%}
.banner .wrap-banner .swiper-container .banner-img img{width: 100%}

.hot-movie{width: 100%}
.hot-movie ul{width: 100%;}
.hot-movie ul li{margin: 0 0.16rem 0.16rem 0.16rem;padding-top: 0.16rem}
.hot-movie ul li .movie-img img{width: 100%;}
.hot-movie ul li .movie-info{display: flex;justify-content:space-between;background-color: #fff;}
.hot-movie ul li .movie-info .imformation{padding-top: 0.06rem;padding-left: 0.12rem;}
.hot-movie ul li .movie-info .imformation p{font-size: 0.13rem}
.hot-movie ul li .movie-info .imformation p:nth-child(1){color: #222}
.hot-movie ul li .movie-info .imformation p:nth-child(2){color: #ccc}
.hot-movie ul li .movie-info .rating{line-height: 0.5rem;color: orange;padding-right: 0.13rem;font-size: 0.18rem}
.hot-movie .more-button button{display: block; width: 1.6rem;height: 0.3rem;border-radius: 0.3rem;border:1px solid #888;margin: 0 auto 0.3rem;background-color: rgba(225,225,225,0)}

.will-show .title{width: 100%;border-bottom: 1px solid #a8a8a8;margin:0.3rem 0}
.will-show .title .upcoming{margin: 0 auto;margin-bottom: -0.1rem;width: 0.65rem;height: 0.2rem;font-size: 0.14rem;background-color: #a7a7a7;text-align: center;border-radius: 0.05rem;color: #fff;}
.will-show ul li .movie-info{padding: 0.05rem 0.1rem 0.05rem 0.1rem;}
.will-show ul li .movie-info .imformation{padding:0}
.will-show ul li .movie-info .time{font-size: 0.14rem;color: orange}


.sidebar-container{position: fixed;top: 50px;bottom: 0;left: 0;right: 0;color: #9a9a9a;z-index: 501;}
.sidebar-container .slidebar-overlay{background: rgba(0,0,0,0.5);position: absolute;top: 0px;right: 0;bottom: 0;left: 0;transition: all ease 0.4s;-webkit-transition: all ease 0.4s;}
.sidebar-container .slidebar-overlay nav{border-top: 1px solid #222;box-shadow: 0 1px 1px #363636 inset;background: #282828;position: absolute;display: block;top: 0;right: 110px;bottom: 0;left: 0;transition: all ease 0.4s;-webkit-transition: all ease 0.4s;}
.sidebar-container .slidebar-overlay nav li{height: 0.5rem;line-height: 0.5rem}
.sidebar-container .slidebar-overlay nav li a{justify-content:space-between; display: block;display:flex;width: 100%;padding: 0 16px;border-bottom: 1px dotted #333;color:#9a9a9a;box-sizing: border-box;font-size: 0.14rem}

.wrap-filmlist{padding-left: 0.15rem;padding-right: 0.15rem}
.wrap-filmlist .tap{height: 46px;margin: 0 auto;border-bottom: solid #fe6e00 1px;display: flex}
.wrap-filmlist .tap div{flex:1;box-sizing: border-box;}
.wrap-filmlist .tap div .router-link-active div{border-bottom: 3px solid orange;box-sizing: border-box;}
.wrap-filmlist .tap div a{display: block;text-align: center;width: 100%;height: 100%;}
.wrap-filmlist .tap div a div{height: 100%;line-height: 0.4rem}

.wrap-filmlist .tap .router-link-active{color: #fe6e00;}
.wrap-list .film-item{padding: 0.2rem 0;border-bottom: dashed 1px #c9c9c9;cursor: pointer;width: 100%;display: flex;width: 100%}
.wrap-list .film-item .item-img{width: 0.6rem;float: }
.wrap-list .film-item .item-img img{width: 100%}
.wrap-list .film-item .item-desc{padding-left: 0.15rem;width:70%}
.wrap-list .film-item .item-desc .title{display: flex; justify-content:space-between;align-items:center}
.wrap-list .film-item .item-desc .title .film-name{flex:1;font-size: 16px;line-height: 32px;color: #000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.wrap-list .film-item .item-desc span{font-size: 0.12rem}
.wrap-list .film-item .item-desc .film-next-arrow{color: #c6c6c6;width: 0.2rem;text-align: center;}
.film-grade{color:orange;width: 0.2rem}
.film-color{color: #8aa2bf;}

.wrap-detail .banner img{width: 100%}
.wrap-detail .film-intro{font-size: 0.12rem}
.wrap-detail .film-intro .title{font-size: 0.16rem;height: 0.28rem;line-height: 0.28rem}
.wrap-detail .film-intro div{height: 0.2rem;overflow: hidden;line-height: 0.2rem}
.wrap-detail .film-intro div.content{white-space:normal;text-overflow: ellipsis;overflow: visible; }
.cinemalist .wrap-qu .content{padding: 10px 0 12px 16px;cursor: pointer;}
.cinemalist .wrap-qu .wrap-content{width: 75%}
.cinemalist .wrap-qu .title{height: 40px;line-height: 40px;font-size: 14px;padding-left: 16px;background: #e1e1e1; margin-bottom: 1px;color: #636363;cursor: pointer;}
.cinemalist .wrap-qu .address{font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #ccc}

.toTop{position: fixed;bottom: 0.1rem;right: 0.1rem;width: 0.5rem;height: 0.5rem;text-align: center;line-height: 0.5rem;background-color: #666;border-radius: 50%}
.toTop i{color: #fff;font-size: 0.22rem}

 .side-enter-active {
         animation: side-out 0.5s;
     }
 .side-leave-active {
        animation: side-in 0.5s;
    }

@keyframes side-out{
	0%{
		transform:translateX(-100%);
		background: rgba(0,0,0,0);
	}
	100%{
		transform:translateX(0);
		background: rgba(0,0,0,0.5);
	}
}
@keyframes side-in{
	0%{
		transform:translateX(0);
		background: rgba(0,0,0,0.5);
	}
	100%{
		transform:translateX(-100%);
		background: rgba(0,0,0,0);
	}
}

 